$(function () {
    // bootstrap-switch加载
    $('[name="postType"]').bootstrapSwitch();

    // 图片点击打开文件选择框
    $('#openMainImage').click(function () {
        $('#mainImage').click();
    });
    $('#mainImageDiv').click(function () {
        $('#mainImage').click();
    });
    $('#openOtherImage').click(function () {
        $('#otherImage').click();
    });
    $('#otherFirstImage').click(function () {
        $('#otherImage').click();
    });
    $('#otherSecondImage').click(function () {
        $('#otherImage').click();
    });


    // 主图选择
    $('#mainImage').on('change', function (e) {
        var mainImage = e.target.files[0]; // 又卡了半天
        if(checkImage(mainImage)){
            // 选择了图片
            var reader = new FileReader(); // 创建FileReader对象
            // 使用FileReader的readAsDataURL方法读取文件内容
            reader.readAsDataURL(mainImage);
            reader.onload = function (e) {
                // 读取成功后，设置img的src为结果中的data URL
                $('#mainImageDiv').css('display', 'block').find('img').attr('src', e.target.result);
                $('#openMainImage').css('display', 'none');
            };
        }else{
            $('#mainImageDiv').css('display', 'none')
            $('#openMainImage').css('display', 'block');
        }
    });

    // 其它图选择
    $('#otherImage').on('change', function (e) {
        $('#otherSecondImage').attr('src', ''); // 请空二图，因为存在第一次2张第二次1张，导致后面那张图还在
        var otherImages = e.target.files; // 又卡了半天
        if(otherImages.length === 0){
            $('#otherImageDiv').css('display', 'none');
            $('#openOtherImage').css('display', 'block');
            return;
        }
        if (otherImages.length > 2) {
            toastr.warning('其它图片最多两张！', '警告', {timeOut: 5000});
            return;
        }
        var reader = new FileReader(); // 创建FileReader对象
        if (otherImages.length === 1) {
            reader.readAsDataURL(otherImages[0]);
            reader.onload = function (e) {
                $('#otherFirstImage').attr('src', e.target.result)
            };
        } else if (otherImages.length === 2) {
            reader.readAsDataURL(otherImages[0]);
            reader.onload = function (e) {
                $('#otherFirstImage').attr('src', e.target.result)
            };
            reader = new FileReader(); // 不然用不了
            reader.readAsDataURL(otherImages[1]);
            reader.onload = function (e) {
                $('#otherSecondImage').attr('src', e.target.result)
            };
        }
        $('#otherImageDiv').css('display', 'block');
        $('#openOtherImage').css('display', 'none');
    });

    // 提交
    $('#upload').click(function () {
        $(this).attr('disabled', true);
        // 表单数据
        var data = new FormData();
        var postTitle = $('#postTitle').val();
        var petCategoryId = $('#postSecondPetCategories').find('option:selected').val(); // 分类和地址不用判断了，反正String映射不上后端
        var addressCategoryId = $('#postThirdAddresses').find('option:selected').val();
        var postType = ($('#postType').bootstrapSwitch('state')) ? '0' : '1';
        var textContent = $('#inputDescription').val();
        if (!checkParams(postTitle, textContent)) {
            $(this).attr('disabled', false);
            return;
        }
        data.append('postTitle', postTitle);
        data.append('petCategoryId', petCategoryId);
        data.append('addressCategoryId', addressCategoryId);
        data.append('postType', postType);
        data.append('textContent', textContent);
        // 图片
        var mainImage = $('#mainImage').prop("files")[0];
        var otherImage = $('#otherImage').prop("files");
        data.append('Images', mainImage);
        // 判断其他图片
        if (otherImage.length > 0) {
            for (let i = 0; i < otherImage.length; i++) {
                if (!checkImage(otherImage[i])) {
                    $(this).attr('disabled', false);
                    return;
                }
                data.append('Images', otherImage[i]);
            }
        }
        // 发送请求
        $.ajax({
            type: 'POST',
            processData: false,  // 注意：让jQuery不要处理数据
            contentType: false,  // 注意：让jQuery不要设置contentType
            url: '/post/createPost',
            data: data,
            success: function (result) {
                if (result.statusCode === 200) {
                    alert('发布成功！');
                    // 跳转到帖子页面
                    window.location.href = '/post/detail/' + result.data;
                } else {
                    toastr.error(result.message, {timeOut: 3000});
                }
            },
            complete: function () {
                $('#upload').attr('disabled', false);
            }
        });
    });

});

function checkParams(postTitle, textContent) {
    if (isEmpty(postTitle) || postTitle.length > 20) {
        toastr.warning('标题格式错误！', '警告', {timeOut: 5000});
        return false;
    } else if (textContent.length > 200) {
        toastr.warning('文本内容格式错误！', '警告', {timeOut: 5000});
        return false;
    }
    return true;
}

function checkImage(image) {
    if (image === undefined) {
        toastr.warning('未选择图片！', '警告', {timeOut: 5000});
        return false;
    } else if (!image.type.startsWith('image/')) {
        toastr.warning('请选择图片类型文件！', '警告', {timeOut: 5000});
        return false;
    } else if (image.size > 3 * 1024 * 1024) {
        toastr.warning('图片最大限制3MB！', '警告', {timeOut: 5000});
        return false;
    }
    return true;
}